<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type='text/javascript' src='../jquery-1.10.2.js'></script>
<!--<script type='text/javascript' src='jquery-tmpl.js'></script>-->
<script type='text/javascript' src='../knockout-2.3.0.js'></script>
</head>
<body>
<form data-bind="submit:addItem">
    Add item: <input type="text" data-bind='value:itemToAdd, valueUpdate: "afterkeydown"' />
    <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
</form>

<p>Your values:</p>
<select multiple="multiple" height="5" data-bind="options:allItems, selectedOptions:selectedItems"> </select>

<div>
    <button data-bind="click: removeSelected, enable: selectedItems().length > 0">Remove</button>
    <button data-bind="click: function() { allItems.sort() }, enable: allItems().length > 1">Sort</button>
</div>
<script>
// In this example, betterListModel is a class, and the view model is an instance of it.

// See simpleList.html for an example of how to construct a view model without defining a class for it. Either technique works fine.

var betterListModel = function () {
    this.itemToAdd = new ko.observable("");
    this.allItems = new ko.observableArray(["Fries", "Eggs Benedict", "Ham", "Cheese"]);

// Initial items

this.selectedItems = new ko.observableArray(["Ham"]);                               

// Initial selection 

    this.addItem = function () {
        if ((this.itemToAdd() != "") && (this.allItems.indexOf(this.itemToAdd()) < 0))
    // Prevent blanks and duplicates
        this.allItems.push(this.itemToAdd());
        this.itemToAdd(""); // Clear the text box
    } 

    this.removeSelected = function () {
        this.allItems.removeAll(this.selectedItems());
        this.selectedItems([]); // Clear selection
    }
};

ko.applyBindings(new betterListModel());
</script>

</body>
</html>